<template>
  <div ref="pageComBox" class="all_into_page page_wrapper">
    <div ref="otherBox">
      <!-- 搜索区域 开始 -->
      <div class="search_box">
        <el-form :model="searchForm" :inline="true" size="small">
          <el-form-item label="客户姓名：">
            <el-input v-model="searchForm.name"></el-input>
          </el-form-item>
          <el-form-item label="客户手机：">
            <el-input v-model="searchForm.mobile"></el-input>
          </el-form-item>
          <el-form-item label="媒体：">
            <media-select v-model="searchForm.media"></media-select>
          </el-form-item>
          <el-form-item label="渠道：">
            <channel-select v-model="searchForm.channel"></channel-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getList()"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 搜索区域 end -->
    </div>

    <!-- 列表区域 开始 -->
    <div class="">
      <el-table
        ref="multipleTable"
        class="el_table"
        :data="dataList"
        v-loading="loading"
        element-loading-text="加载中..."
        :max-height="tableHeight"
        :key="tableHeight"
        v-tabscroll="$getTableHeight"
      >
        <el-table-column label="客户信息" prop="name" width="140">
          <template slot-scope="{ row }">
            <tab-user :user="row" :list="dataList" v-if="row"></tab-user>
          </template>
        </el-table-column>
        <el-table-column label="年龄" prop="age"></el-table-column>
        <el-table-column label="状态" prop="progress">
          <template slot-scope="{ row }">{{
            FOLLOWUPOPTIONS[row.progress]
          }}</template>
        </el-table-column>
        <el-table-column label="锁定状态" :width="80">
          <template slot-scope="{ row }">
            <el-tag
              type="danger"
              class="tab_el_tag"
              size="mini"
              v-if="row.lock == 1"
              >锁定</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="持有人" prop="employeeName">
          <template slot-scope="{ row }">{{
            row.employee ? row.employee.name : ""
          }}</template>
        </el-table-column>
        <el-table-column label="标记" prop="level">
          <template slot-scope="{ row }">{{ row.level }}星</template>
        </el-table-column>
        <el-table-column label="条件" prop="label">
          <!-- <template slot-scope="{row}">{{row.contractBO?row.contractBO.deposit:''}}</template> -->
        </el-table-column>
        <el-table-column label="媒体" prop="media"></el-table-column>
        <el-table-column label="渠道" prop="channel"></el-table-column>
        <el-table-column label="入库时间" prop="createDate"></el-table-column>
        <el-table-column
          label="分配时间"
          prop="distributeDate"
        ></el-table-column>
        <el-table-column label="上门时间" prop="registerDate"></el-table-column>
      </el-table>
      <BasePagination
        v-model="page"
        :total="totalCount"
        :pageSize="pageSize"
        @change="pageOnChange"
      />
    </div>
    <!-- 列表区域 end -->
  </div>
</template>
<script>
import { deepClone } from "@/utils/util";
import { GETIMPORTCUSTOMER } from "@/api/customer";
import { GET_REGISTER_CUSSTOMER } from "@/http/customer";
import { SEXTYPELIST, FOLLOWUPOPTIONS } from "@/common/constants";
import TabUser from "@/components/user";
import MediaSelect from "@/components/follow/media";
import ChannelSelect from "@/components/follow/channel";
export default {
  components: {
    TabUser,
    MediaSelect,
    ChannelSelect,
  },
  data() {
    return {
      searchForm: {},
      page: 1,
      pageSize: 100,
      dataList: [],
      totalCount: 0,
      SEXTYPELIST,
      FOLLOWUPOPTIONS,
      loading: false,
      tableHeight: 0,
    };
  },
  mounted() {
    this.getList();
    // 计算表格的高度
    let _this = this;
    this.$getTableHeight();
    window.onresize = function () {
      _this.$getTableHeight();
    };
  },
  methods: {
    // 分页切换事件
    pageOnChange(row) {
      this.page = row.page;
      if (row.pageSize) {
        this.pageSize = row.pageSize;
      }
      this.getList();
    },

    // 获取参数
    getParams() {
      const oParams = {};
      const o = deepClone(this.searchForm);
      if (!o.media) {
        delete o.media;
      }
      if (!o.channel) {
        delete o.channel;
      }
      oParams.size = this.pageSize;
      oParams.paramObject = o;
      return oParams;
    },

    // 获取列表
    getList(current) {
      const oParams = this.getParams();
      oParams.page = current || this.page;
      this.loading = true;
      GET_REGISTER_CUSSTOMER(oParams).then((res) => {
        this.loading = false;
        let obj = res.data || {};
        this.dataList = obj.dataList || [];
        this.totalCount = obj.totalCount;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.all_into_page {
  padding: 20px;
  .show_tips {
    font-size: 14px;
    color: #666;
    line-height: 2;
    margin: 10px 0;
  }
}
</style>
